<script lang="tsx" setup>
import { ref, toRefs } from 'vue';
import { useDict } from '@/utils/dict';
import { getPageList } from '@/service/api/log/loginLog';
import { useTable } from '@/hooks/common/table';
import DictTag from '@/components/custom/dict-tag.vue';
import { useAppStore } from '@/store/modules/app';
import { useNaiveForm } from '@/hooks/common/form';
import type { OperLogVo } from '@/service/types/log';
const { sys_normal_disable } = toRefs<any>(useDict('sys_normal_disable'));
const appStore = useAppStore();
const { formRef, validate, restoreValidation } = useNaiveForm();
const { columns, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
  apiFn: getPageList,
  showTotal: true,
  apiParams: {
    pageNum: 1,
    pageSize: 10,
    status: null,
    params: {
      beginTime: null,
      endTime: null
    },
    range: null
  },
  columns: () => [
    {
      title: '登录设备',
      key: 'deviceType'
    },
    {
      title: '登录地点',
      key: 'ipaddr',
      ellipsis: {
        tooltip: true
      },
      render: row => {
        return (
          <>
            {row.ipaddr}-({row.loginLocation})
          </>
        );
      }
    },
    {
      title: '操作系统',
      key: 'os',
      minWidth: 100,
      ellipsis: {
        tooltip: true
      }
    },
    {
      title: '登录状态',
      key: 'status',
      render: row => {
        return <DictTag type="badge" value={row.status} dicts={sys_normal_disable.value} />;
      }
    },
    {
      title: '描述',
      key: 'msg'
    },
    {
      title: '登录时间',
      key: 'loginTime'
    }
  ]
});
const search = () => {
  if (searchParams.range) {
    searchParams.params.beginTime = searchParams.range[0];
    searchParams.params.endTime = searchParams.range[1];
    // searchParams.params.beginTime = searchParams.range[0];
    // searchParams.params?.endTime = searchParams.range[1];
  }
  getData();
};
const reset = () => {
  // searchParams.params = null;
  searchParams.params.beginTime = null;
  searchParams.params.endTime = null;
  resetSearchParams();
};
</script>

<template>
  <div class="h-100% min-h-430px flex-col-stretch gap-16px overflow-hidden p-24px lt-sm:overflow-auto">
    <div class="flex justify-between flex-items-center">
      <div>
        <div class="font-width-500 font-size-18px">登录日志</div>
        <div class="mt-8px font-size-12px text-gray-400">个人的近期登录日志</div>
      </div>
      <NButton>
        <template #icon>
          <SvgIcon icon="heroicons-solid:arrow-up-tray" />
        </template>
        导出
      </NButton>
    </div>
    <NForm ref="formRef" :model="searchParams" label-placement="top" :label-width="80">
      <NGrid responsive="screen" item-responsive x-gap="12">
        <NFormItemGi span="24 s:12 m:3" path="status" feedback-style="min-height: 0px;">
          <NSelect
            v-model:value="searchParams.status"
            placeholder="请选择登录状态"
            :options="sys_normal_disable"
            clearable
          />
        </NFormItemGi>
        <NFormItemGi span="24 s:12 m:5" path="range" feedback-style="min-height: 0px;">
          <NDatePicker
            v-model:formatted-value="searchParams.range"
            value-format="yyyy-MM-dd HH:mm"
            type="daterange"
            clearable
          />
        </NFormItemGi>
        <NFormItemGi span="24 s:12 m:6" feedback-style="min-height: 0px;">
          <NSpace class="w-full">
            <NButton @click="reset">重置</NButton>
            <NButton type="primary" ghost @click="search">搜索</NButton>
          </NSpace>
        </NFormItemGi>
      </NGrid>
    </NForm>
    <NDataTable
      :row-key="row => row.loginId"
      :flex-height="!appStore.isMobile"
      :scroll-x="962"
      class="sm:h-full"
      :columns="columns"
      :data="data"
      :loading="loading"
      remote
      :pagination="mobilePagination"
    >
      <template #empty>
        <Empty />
      </template>
    </NDataTable>
  </div>
</template>

<style lang="scss" scoped></style>
